<template>
  <div>
    <zczy-upload
      class="upload-demo"
      :business="$config.ossBusiness"
      :module="$config.ossModule"
      :env="$config.ossEnv"
      :headers="headers"
      :action="actionUrl"
      :limit="10"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="handleAvatarSuccess"
      :on-error="handleAvatarError"
      :on-exceed="exceedData"
      accept="*"
    >
      <el-button
        size="small"
        type="default"
        v-if="!$route.query.readonly || disabled"
        icon="el-icon-plus"
        >{{ $t('点击上传') }}</el-button
      >
      <div slot="tip" class="el-upload__tip">
        <div
          v-for="(item, index) in fileList"
          :key="index"
          class="el-upload-file"
        >
          <a @click="clickFile(item)">{{ item.fileName }}</a>
          <i
            class="el-icon-close"
            @click="deleteFile(index)"
            v-if="!$route.query.readonly || disabled"
          ></i>
        </div>
      </div>
    </zczy-upload>
  </div>
</template>
<script>
export default {
  props: {
    disabled: Boolean,
    value: [String, Array],
  },
  watch: {
    value() {
      if (this.value && typeof this.value === 'string') {
        this.fileList = this.value ? JSON.parse(this.value) : []
        this.$emit('input', this.fileList)
      }
    },
  },
  data() {
    return {
      actionUrl:
        process.env.VUE_APP_BASE_API +
        '/contract-client-web/system/file/uploadFile',
      headers: {
        ucSsoTokenId: localStorage.getItem('token'),
        ucSystemFlag: 31,
        from: 'saas',
      },
      fileList: [],
    }
  },
  created() {
    if (this.value && typeof this.value === 'string') {
      let fileList = this.value ? JSON.parse(this.value) : []
      this.fileList = fileList.map((it) => {
        let url = ''
        if (it.fileUrl) {
          let arr = it.fileUrl.split('?')[0].split('/')
          url = arr[arr.length - 1]
        }
        return {
          fileUrl: url,
          fileName: it.fileName,
          fileReviewUrl: it.fileUrl,
        }
      })
      this.$emit('input', fileList)
    }
  },
  methods: {
    beforeUpload(file) {
      const isLimitSize = file[0].size / 1024 / 1024 < 20
      if (!isLimitSize) {
        this.$message.error(this.$t('上传文件的大小不能大于20M!'))
      }
      return isLimitSize
    },
    handleAvatarSuccess(res, file) {
      this.fileList.push({
        fileUrl: res.name,
        fileName: res.realName,
        fileReviewUrl: res.previewUrl,
      })
      const fileList = this.fileList.map((it) => {
        return {
          fileUrl: it.fileUrl,
          fileName: it.fileName,
        }
      })
      this.$emit('input', fileList)
    },
    handleAvatarError(err, file, fileList) {
      this.$message.error(err.msg)
    },
    deleteFile(index) {
      this.fileList.splice(index, 1)
      this.$emit('input', this.fileList)
    },
    clickFile(item) {
      let url = item.fileReviewUrl || item.fileUrl
      if (url.startsWith('http') || url.startsWith('https')) {
        window.open(url)
      } else {
        window.open('https://img.zczy56.com/' + url)
      }
    },
    exceedData(files, fileList) {
      this.$message.warning(this.$t('上传文件数量不能超过10个'))
    },
  },
}
</script>
<style lang="scss">
.el-upload-file {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
</style>
